<html>
  <head>
	<meta charset="UTF-8">
	<title>Business Intelligence</title>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
	
	<div id="layout" style="width:1200px; margin: 0 auto;">
	
	<form method="post">
		<select name="state">
			 <option value="" selected="selected">Select state</option>
			 <option value="Alabama">Alabama</option>
			 <option value="Alaska">Alaska</option>
			 <option value="Arizona">Arizona</option>
			 <option value="Arkansas">Arkansas</option>
			 <option value="California">California</option>
			 <option value="Colorado">Colorado</option>
			 <option value="Connecticut">Connecticut</option>
			 <option value="Delaware">Delaware</option>
			 <option value="District of Columbia">District of Columbia</option>
			 <option value="Florida">Florida</option>
			 <option value="Georgia">Georgia</option>
			 <option value="Hawaii">Hawaii</option>
			 <option value="Idaho">Idaho</option>
			 <option value="Illinois">Illinois</option>
			 <option value="Indiana">Indiana</option>
			 <option value="Iowa">Iowa</option>
			 <option value="Kansas">Kansas</option>
			 <option value="Kentucky">Kentucky</option>
			 <option value="Louisiana">Louisiana</option>
			 <option value="Maine">Maine</option>
			 <option value="Maryland">Maryland</option>
			 <option value="Massachusetts">Massachusetts</option>
			 <option value="Michigan">Michigan</option>
			 <option value="Minnesota">Minnesota</option>
			 <option value="Mississippi">Mississippi</option>
			 <option value="Missouri">Missouri</option>
			 <option value="Montana">Montana</option>
			 <option value="Nebraska">Nebraska</option>
			 <option value="Nevada">Nevada</option>
			 <option value="New Hampshire">New Hampshire</option>
			 <option value="New Jersey">New Jersey</option>
			 <option value="New Mexico">New Mexico</option>
			 <option value="New York">New York</option>
			 <option value="North Carolina">North Carolina</option>
			 <option value="North Dakota">North Dakota</option>
			 <option value="Ohio">Ohio</option>
			 <option value="Oklahoma">Oklahoma</option>
			 <option value="Oregon">Oregon</option>
			 <option value="Pennsylvania">Pennsylvania</option>
			 <option value="Rhode Island">Rhode Island</option>
			 <option value="South Carolina">South Carolina</option>
			 <option value="South Dakota">South Dakota</option>
			 <option value="Tennessee">Tennessee</option>
			 <option value="Texas">Texas</option>
			 <option value="Utah">Utah</option>
			 <option value="Vermont">Vermont</option>
			 <option value="Virginia">Virginia</option>
			 <option value="Washington">Washington</option>
			 <option value="West Virginia">West Virginia</option>
			 <option value="Wisconsin">Wisconsin</option>
			 <option value="Wyoming">Wyoming</option>
		</select>
		<select name="NAICS">
			 <option value="" selected="selected">Select NAICS</option>
			 <option value="Total">Total</option>
			 <option value="Agriculture, forestry, fishing and hunting">Agriculture, forestry, fishing and hunting</option>
			 <option value="Mining, quarrying, and oil and gas extraction">Mining, quarrying, and oil and gas extraction</option>
			 <option value="Utilities">Utilities</option>
			 <option value="Construction">Construction</option>
			 <option value="Manufacturing">Manufacturing</option>
			 <option value="Wholesale trade">Wholesale trade</option>
			 <option value="Retail trade">Retail trade</option>
			 <option value="Transportation and warehousing">Transportation and warehousing</option>
			 <option value="Information">Information</option>
			 <option value="Finance and insurance">Finance and insurance</option>
			 <option value="Real estate and rental and leasing">Real estate and rental and leasing</option>
			 <option value="Professional, scientific, and technical services">Professional, scientific, and technical services</option>
			 <option value="Management of companies and enterprises">Management of companies and enterprises</option>
			 <option value="Administrative and support and waste management and remediation services">Administrative and support and waste management and remediation services</option>
			 <option value="Educational services">Educational services</option>
			 <option value="Health care and social assistance">Health care and social assistance</option>
			 <option value="Arts, entertainment, and recreation">Arts, entertainment, and recreation</option>
			 <option value="Accommodation and food services">Accommodation and food services</option>
			 <option value="Other services (except public administration)">Other services (except public administration)</option>
			 <option value="Industries not classified">Industries not classified</option>
		</select>
		<input type="submit" value="Select" />
	</form>
	
	<?php include_once("getcsv.php"); ?>
	
	<script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
      
    function drawChart() {
	  var people = <?php echo $people; ?>;
      var dataPeople = google.visualization.arrayToDataTable(people,
      false); // 'false' means that the first row contains labels, not data.

	  var money = <?php echo $money; ?>;
      var dataMoney = google.visualization.arrayToDataTable(money,
      false); // 'false' means that the first row contains labels, not data.
	  
	  var salary = <?php echo $salary; ?>;
      var dataSalary = google.visualization.arrayToDataTable(salary,
      false); // 'false' means that the first row contains labels, not data.
	  
	  var employment = <?php echo $employment; ?>;
      var dataEmployment = google.visualization.arrayToDataTable(employment,
      false); // 'false' means that the first row contains labels, not data.
	  
      var options1 = {
          title: 'The ratio of the number of people working in different sizes of companies in the state of "<? echo $state; ?>" in "<? echo $naic; ?>"',
          hAxis: {title: 'Size of the company', titleTextStyle: {color: 'blue'}}
	  };
	  
      var chart1 = new google.visualization.PieChart(document.getElementById('chart_div1'));
      chart1.draw(dataPeople, options1);
	  
	  var options2 = {
          title: 'The ratio of wages in companies with different numbers of workers in the state of "<? echo $state; ?>" in "<? echo $naic; ?>"',
          hAxis: {title: 'Size of the company', titleTextStyle: {color: 'green'}}
	  };

      var chart2 = new google.visualization.LineChart(document.getElementById('chart_div2'));
	  chart2.draw(dataMoney, options2);
	  
	  var options3 = {
		title: 'Average salary by states ($ per year) in "<? echo $naic; ?>"',
		hAxis: {title: 'States', titleTextStyle: {color: 'red'}}
      };

      var chart3 = new google.visualization.ColumnChart(document.getElementById('chart_div3'));
	  chart3.draw(dataSalary, options3);
	  
	  var options4 = {
		title: 'The number of employed people in the states',
		hAxis: {title: 'States', titleTextStyle: {color: 'red'}}
      };

      var chart4 = new google.visualization.ColumnChart(document.getElementById('chart_div4'));
	  chart4.draw(dataEmployment, options4);
    
	}
	
    </script>
	
		<div id="chart_div1" style="float:left; width:500px; height:300px; padding-top:50px;"></div>
		<div id="chart_div2" style="width: 700px; height: 400px; float:right;"></div>
		<div id="chart_div3" style="width: 1200px; height: 600px; clear:both;"></div>
		<div id="chart_div4" style="width: 1200px; height: 600px; clear:both;"></div>
	
	</div>
  </body>
</html>